<template>
  <div class="box">
    <div class="search">
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="学科名称">
            <el-input v-model="subjectName" size="small"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="clear">清除</el-button>
            <el-button type="primary" size="small" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button
          type="success"
          size="small"
          icon="el-icon-edit"
          @click="modification()"
          >新增学科</el-button
        >
      </div>
    </div>
    <el-alert :title="`数据一共${counts}条`" type="info" show-icon class="num">
    </el-alert>

    <template>
      <el-table
        :data="list"
        style="width: 100%"
        :header-cell-style="{ background: '#fafafa' }"
      >
        <el-table-column
          header-align="center"
          align="center"
          type="index"
          label="序号"
          width="48"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="subjectName"
          label="学科名称"
          width="150"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="username"
          label="创建者"
          width="150"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="addDate"
          label="创建日期"
          width="150"
          :formatter="time"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="isFrontDisplay"
          label="前台是否显示"
          width="150"
          :formatter="isShow"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="twoLevelDirectory"
          label="二级目录"
          width="150"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="tags"
          label="标签"
          width="150"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="totals"
          label="题目数量"
          width="150"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="address"
          label="操作"
        >
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="$router.push('/subjects/directorys')">学科分类</el-button>
            <el-button type="text" size="small" @click="$router.push('/subjects/tags')">学科标签</el-button>
            <el-button type="text" size="small" @click="modification(row)"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="remove(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          layout=" prev, pager, next, sizes, jumper"
          :total="page.total"
          @current-change="changePage"
          :current-page="page.page"
          :page-sizes="[5,10,20, 50]"
          :page-size="page.pagesize"
          @size-change="changejump"
        >
        </el-pagination>
      </div>
    </template>
    <Windows :show-dialog.sync="showDialog" :amend="amend" :titleId = titleId></Windows>
  </div>
</template>
<script>
import { getsubjectsList, deletesubject } from '@/api/hmmm/jjqsubject'
import { status } from '@/api/hmmm/constants'
import { parseTime } from '@/utils'
import Windows from '@/module-hmmm/components/jjq-add'
export default {
  data () {
    return {
      formInline: {
        user: '',
        region: ''
      },
      showDialog: false,
      // 表格数组
      list: [],
      counts: '',
      page: {
        // 放置页码及相关数据
        page: 1,
        pagesize: 10,
        total: 0 // 记录总数
      },
      subjectName: '',
      amend: {
        subjectName: '',
        isFrontDisplay: 1
      },
      titleId: ''
    }
  },
  components: {
    Windows
  },
  created () {
    this.getsubjectsList()
  },
  methods: {
    async getsubjectsList () {
      const { data } = await getsubjectsList(this.page)
      this.counts = data.counts
      this.page.total = data.counts
      this.list = data.items
    },
    time (row, column, cellValue, index) {
      return parseTime(cellValue)
    },
    isShow (row, column, cellValue, index) {
      const obj = status.find(item => item.value === cellValue)
      return obj === undefined ? '未知' : obj.label
    },
    async search () {
      const { data } = await getsubjectsList({
        // 放置页码及相关数据
        page: 1,
        pagesize: 10,
        total: 0, // 记录总数
        subjectName: this.subjectName
      })
      this.counts = data.counts
      this.page.total = data.counts
      this.list = data.items
    },
    changePage (newPage) {
      this.page.page = newPage
      this.getsubjectsList()
    },
    changejump (newsize) {
      this.page.pagesize = newsize
      this.getsubjectsList()
    },
    modification (row) {
      this.showDialog = true
      if (row) {
        this.amend = {
          subjectName: row.subjectName,
          isFrontDisplay: row.isFrontDisplay,
          id: row.id
        }
        console.log(this.amend)
        this.titleId = '修改学科'
      } else {
        this.titleId = '新增学科'
      }
    },
    clear () {
      this.subjectName = ''
      this.page.page = 1
      this.getsubjectsList()
    },
    async remove (row) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
      await deletesubject(row)
      const { data } = await getsubjectsList(this.page)
      // this.counts = data.counts
      console.log(data)
      if (data.items.length === 0 && this.page.page > 1) {
        this.page.page--
        this.getsubjectsList()
      } else {
        this.page.total = data.counts
        this.list = data.items
      }
      this.$message.success('删除成功')
    }
  }
}
</script>

<style scoped>
body {
  background-color: #f4f4f4;
}
.box {
  margin: 20px;
}
.search {
  display: flex;
  justify-content: space-between;
}
.num {
  margin-bottom: 15px;
}
.block {
  text-align: right;
  background-color: #fff;
}
.operation {
  display: flex;
  justify-content: space-between;
}
a {
  display: inline-block;
  margin: 0 5 0 5;
}
</style>
